<template>
    <el-table
        class="table-mb"
        v-loading="loading"
        :data="arr_data"
        row-key="sid"
        max-height="500"
        :header-cell-style="{
            background: '#F5F7FA',
            textAlign: 'center',
        }"
        :cell-style="
            ({ column }) => {
                return {
                    textAlign:
                        column.className === 'operation-nav'
                            ? 'left'
                            : 'center',
                    paddingLeft:
                        column.className === 'operation-nav' ? '25px' : '0',
                };
            }
        "
        border
        element-loading-background="rgba(255, 255, 255, 0.6)"
        @sort-change="sortChange"
    >
        <el-table-column
            prop="userVersion"
            label="审核版本"
            min-width="150"
            fixed="left"
        ></el-table-column>
        <el-table-column
            prop="userDesc"
            label="版本描述"
            min-width="150"
        ></el-table-column>
        <el-table-column prop="commitType" label="提交类型" min-width="150">
            <template #default="{ row }">
                <el-text :type="['', 'warning'][row.commitType]">{{
                    dictStore.getDictMemberName(
                        "mini_program_commit_type",
                        row.commitType
                    )
                }}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="created" label="提交时间" min-width="160">
        </el-table-column>
        <el-table-column prop="commitStatus" label="提交状态" min-width="200">
            <template #default="{ row }">
                <div class="flex items-center justify-center">
                    <span>
                        {{
                            row.commitType === 0
                                ? "上传代码成功,等待提交审核"
                                : dictStore.getDictMemberName(
                                      "mini_program_commit_status",
                                      row.commitStatus
                                  )
                        }}
                    </span>
                    <el-tooltip
                        v-if="row.commitStatus === 1"
                        effect="dark"
                        :content="row.reason"
                        raw-content
                        placement="top"
                        popper-class="max-w-400"
                    >
                        <el-icon class="ml-5"><WarningFilled /></el-icon>
                    </el-tooltip>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        background
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="pageSizeNum"
        :total="totalNums"
        layout="slot, sizes, prev, pager, next, jumper"
    >
        <span class="color-#606266"
            >共&nbsp;{{
                totalNums >= 100 * pageSize ? `${100 * pageSize}+` : totalNums
            }}&nbsp;条</span
        >
    </el-pagination>
</template>

<script setup>
import OneLoad from "@mixins/one-load";
import { getUpdateRecord } from "@/apis/system/miniapp.js";
import { reactive } from "vue";
import { useDictStore } from "@stores/dict.js";

const dictStore = useDictStore();
dictStore.getDictMembers("mini_program_commit_type");
dictStore.getDictMembers("mini_program_commit_status");

const state = reactive({
    ascended: false,
    sortFieldName: null,
});

const {
    loading,
    arr_data,
    pubRefreshParams,
    pubParams,
    page,
    pageSize,
    getdata,
    pageSizeNum,
    totalNums,
    openPaging,
} = OneLoad();

openPaging(getList);

function getList() {
    getdata(
        getUpdateRecord({
            current: page.value,
            size: pageSize.value,
            ascended: state.ascended,
            sortFieldName: state.sortFieldName,
            entType: 0,
        })
    );
}

const sortChange = (e) => {
    const { property, order } = e.column;
    state.ascended = order === "ascending";
    state.sortFieldName = order ? property : null;
    pubRefreshParams(getList);
};

defineExpose({
    pubParams: () => pubParams(getList),
});
</script>
